        * {
            box-sizing: border-box;
        }

        body {
            margin: auto;
            /*padding: auto;*/
            /*background: #494A5F;*/
            font-weight: 500;
            font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }

        #container {
            width: 400px;
            height: 820px;
            /*margin: 0 auto;*/
        }
        div.search {width: 40%;}

        form {
            position: relative;
            width: 245px;
            margin: auto;
        }

        input {
            width: 100%;
            height: 42px;
            padding-left: 5%;
        }

        button {
            height: 42px;
            width: 42px;
            cursor: pointer;
            position: absolute;
        }

        /*搜索框*/
        .bar7 {background: #7BA7AB;}
        .bar7 form {
            height: 42px;
        }
        .bar7 input {
            width: 220px;
            border-radius: 42px;
            border: 2px solid #324B4E;
            background: #F9F0DA;
            transition: .3s linear;
            float: right;
        }
        .bar7 input:focus {
            width: 250px;
        }
        .bar7 button {
            background: none;
            top: -2px;
            right: 0;
        }
        .bar7 button:before{
            content: "\f002";
            font-family: FontAwesome;
            color: #324b4e;
        }